<template >
  <div class="Header" style="height: 50px; line-height :50px; border-bottom: 1px solid #ccc; display: flex">

<!--    系统名称-->
    <div style="width: 200px; padding-left: 30px; font-weight: bold;  color: white">
      <H1 style="font-family: 华文行楷">研岸</H1>
    </div>  <!--左边-->

<!--    搜索框-->
    <div style="flex: 1; text-align: center">
      <el-input v-model="likeSearchInput" placeholder="搜索你感兴趣的文章内容" style="width: 200px"></el-input>
      <el-button @click="likeSearchButton"><el-icon><Search/></el-icon>Search</el-button>
    </div>              <!--中间-->

<!--    用户下拉框和功能区-->
    <div style="width: 400px; text-align: right">
<!--    用户功能区-->
<!--      客户端-->
      <el-button size="small" color="black" @click="clientButton"><el-icon><EditPen /></el-icon>客户端</el-button>
<!--      关于我们-->
      <el-button size="small" color="black" @click="AboutMeButton"><el-icon><EditPen/></el-icon>关于我</el-button>
<!--      通知-->
      <el-button size="small" color="black" @click="noticeButton"><el-icon><EditPen /></el-icon>通知</el-button>
<!--      投稿-->
      <el-button size="small" color="black" @click="writeButton"><el-icon><EditPen /></el-icon>投稿</el-button>
<!--      分割线-->
      <el-divider direction="vertical" />
<!--      用户下拉框-->
      <el-dropdown>
        <el-button size="default" type="primary" color="black" style="padding-top: 25px">
          <el-icon><User /></el-icon>{{userId}}
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="personInformationButton">个人中心</el-dropdown-item>
            <el-dropdown-item @click="myArticlesButton">我的投稿</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>    <!--右边-->
  </div>
</template>

<script>
import {Edit,ArrowDown,Search,User,EditPen} from "@element-plus/icons-vue";
import router from "@/router";

export default {
  components: {
    Edit,
    ArrowDown,
    Search,
    User,
    EditPen,
  },

  created() {
    this.load()
  },

  methods:{
    load(){
      let user=sessionStorage.getItem("User")
      this.userId=JSON.parse(user).userId
    },

    personInformationButton(){
      router.push("/PersonInformationView")
    },

    noticeButton(){
      router.push("/NoticeView")
    },

    clientButton(){

    },

    AboutMeButton(){
        router.push("/AboutMeView")
    },

    writeButton(){
        router.push("/WriteArticleView")
    },

    myArticlesButton(){
      router.push("/PersonArticleView")
    },

    likeSearchButton(){
      router.push({
        name:"LikeSearchView",
        query:{
          articleBody: this.likeSearchInput,
        }
      })
    }

  },

  data(){
    return{
      userId: '',
      userInformation:'',
      likeSearchInput:'',
    }
  },
}
</script>

<style>
.Header{
  background-color: black;
}
</style>
